<template>
  <div>
    <div class="bo">
      

      <div class="hero">
    <div class="container">
      <h1 class="f">Welcome To Management System</h1>
      <p class="f">By: 三个有志青年</p>
    </div>
  </div>

  <section class="container content">
    <h2>Content One</h2>
 
    <p class="f">前端使用Vue框架，页面主要实现使用element-ui，引入axios依赖向后端发送请求，使用vue-router实现前端路由跳转。前端的部分请求使用了qs的格式转化功能。</p>

    <h3>Content Two</h3>
    <p class="f">后端使用springboot框架，使用maven管理依赖，使用mybatis-plus，lombok，spring-boot-starter-security，jjwt-api等依赖。</p>
  </section>

  
  </div>
</div>
    
</template>
<script>
   export default {
    data(){
      return{}
    },
   mounted:function(){
    const ps = document.querySelectorAll('.f')

ps.forEach(p => {
    p.innerHTML = p.innerText
        .split('')
        .map((letter, idx) => `<span style="transition-delay:${idx* 50}ms">${letter}</span>`)
        .join('')
})
        }
      }
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.bo {
font-family: 'Open Sans', sans-serif;
color: #222;
padding-bottom: 50px;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

.nav {
position: fixed;
background-color: #222;
top: 0;
left: 0;
right: 0;
transition: all 0.3s ease-in-out;
}

.nav .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
transition: all 0.3s ease-in-out;
}


.container {
padding: 10px 0;
}

.nav a.current,
.nav a:hover {
color: #c0392b;
font-weight: bold;
}

.hero {
background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
height: 100vh;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
margin-bottom: 20px;
z-index: -2;
}

.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
}

.hero h1 {
font-size: 46px;
margin: -20px 0 20px;
}

.hero p {
font-size: 20px;
letter-spacing: 1px;
}

.content h2,
.content h3 {
font-size: 150%;
margin: 20px 0;
}

.content p {
color: #555;
line-height: 30px;
letter-spacing: 1.2px;
}
.f {
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.f:hover{
  color: lightcoral;
  font-size: large;
}


</style>